import { Layout, Menu } from 'antd';
const { SubMenu } = Menu;
import { Link } from 'umi';
import './index.less';
const { Header, Footer, Sider, Content } = Layout;
import Login from './login';
import Register from './register';
import Routers from '../config/routers.config';
// import { CommentOutlined, FullscreenExitOutlined, MessageOutlined } from '@ant-design/icons';
import {
  AppstoreOutlined,
  BarChartOutlined,
  CloudOutlined,
  ShopOutlined,
  TeamOutlined,
  UserOutlined,
  UploadOutlined,
  VideoCameraOutlined,
  DeploymentUnitOutlined,
  UserAddOutlined,
  BugOutlined,
  PlusOutlined,
  SwitcherOutlined,
  AlignCenterOutlined,
  SmileOutlined,
  SolutionOutlined,
  PicRightOutlined,
  RadarChartOutlined,
  ApartmentOutlined,
ZhihuOutlined,
FormatPainterOutlined
} from '@ant-design/icons';
import Headers from '../component/header/index';
import React, { useState, useEffect } from 'react';
import SelfFooter from '../component/footer';

function getUserInfo() {
  let token = localStorage.getItem('token') || '';
  return token;
}

function CreateIcon(icon) {
  const IconList = {
    AppstoreOutlined,
    BarChartOutlined,
    CloudOutlined,
    ShopOutlined,
    TeamOutlined,
    UserOutlined,
    UploadOutlined,
    VideoCameraOutlined,
    DeploymentUnitOutlined,
    UserAddOutlined,
    BugOutlined,
    PlusOutlined,
    SwitcherOutlined,
    AlignCenterOutlined,
    SmileOutlined,
    SolutionOutlined,
    PicRightOutlined,
    RadarChartOutlined,
    ApartmentOutlined,
ZhihuOutlined,
FormatPainterOutlined
  };
  // 产生reactnode
  return React.createElement(IconList[icon]);
}

//生成菜单（使用递归的方式）
function CreateItem(item, paths = '') {
  let path = paths + item.path;
  if (item.Children) {
    return (
      <SubMenu
        icon={CreateIcon(item.icon)}
        key={item.path + item.name}
        title={item.name}
      >
        {item.Children.map((items) => CreateItem(items, path))}
      </SubMenu>
    );
  } else {
    return (
      <Menu.Item key={path} icon={CreateIcon(item.icon)}>
        <Link to={path}>{item.name}</Link>
      </Menu.Item>
    );
  }
}

export default function Layouts({ children, routers, history }) {
  const [isLogin, setIslogin] = useState(true);
  useEffect(() => {}, []);
  if (!getUserInfo().length) {
    console.log(getUserInfo().length);
    console.log('我是登录页');
    return isLogin ? (
      <div
        className="flex_center"
        style={{
          width: '100%',
          height: '100%',
          position: 'fixed',
          top: '0px',
          left: '0px',
          right: '0px',
          bottom: '0px',
          margin: 'auto',
        }}
      >
        <Login
          change={() => {
            setIslogin(!isLogin);
          }}
        />
      </div>
    ) : (
      <div
        className="flex_center"
        style={{
          width: '100%',
          height: '100%',
          position: 'fixed',
          top: '0px',
          left: '0px',
          right: '0px',
          bottom: '0px',
          margin: 'auto',
        }}
      >
        <Register
          change={() => {
            setIslogin(!isLogin);
          }}
        />
      </div>
    );
  } else {
    return (
      <>
        <Layout>
          {/* 这里是菜单 */}
          <Sider
            style={{
              overflow: 'auto',
              height: '100%',
              position: 'fixed',
              left: '0',
            }}
          >
            <Menu mode="inline">{Routers.map((item) => CreateItem(item))}</Menu>
          </Sider>

          <Layout style={{ marginLeft: 200 }}>
            <Header
              style={{ zIndex: '1000', position: 'fixed', width: '100%' }}
            >
              <Headers />
            </Header>
            <Content style={{ marginTop: '64px' }}>{children}</Content>
            <Footer>
              <SelfFooter />
            </Footer>
          </Layout>
        </Layout>
      </>
    );
  }
}
